<template>
  <div class="find">
    <h5>姓名:{{ $store.state.userInfo.name }}</h5>
    <h5>技能：{{ $store.state.userInfo.skill }}</h5>
    <h5>年龄：{{ $store.state.userInfo.age }}</h5>
    <p>{{ $store.getters.isadult }}</p>
    <input type="button" @click="setname" value="改为汪汪" />
    <input type="button" @click="setskill" value="改为画画" />
    <input type="button" @click="setage" value="改为8" />
    <input type="button" @click="setinfo" value="修改信息" />
  </div>
</template>

<script>
export default {
  methods: {
    setname () {
      // this.$store.state.userInfo.name = '汪汪'
      // 千里联动,直接调用store的方法
      this.$store.commit('setname')
    },
    setskill () {
      // 带参数修改，两个参数，第一个为方法名，第二个为实参时
      // this.$store.state.userInfo.skill = '画画'
      this.$store.commit('setskill', '画画')
    },
    setage () {
      // this.$store.state.userInfo.age = '8'
      this.$store.commit('setage')
    },
    // 用对象作为实参，两个参数，第一：方法，第二：对象详细信息
    setinfo () {
      this.$store.commit('setInfo', {
        name: 'butterfly',
        skill: '跑步',
        age: '28'
      })
    }
  }
}
</script>

<style></style>
